<template>
  <div class="search">
    <select v-model.number="changeLimit">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <div class="search-box">
      <div>关键字查找：</div>
      <input type="text" v-model.trim="inputValue">
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "Search",
    computed: {
      ...mapState('Information',['changeLimit','inputValue']),
      changeLimit:{
        get(){
          return this.$store.state.Information.changeLimit
        },
        set(val){
          return this.$store.state.Information.changeLimit = val
        }
      },
      inputValue:{
        get(){
          return this.$store.state.Information.inputValue
        },
        set(val){
          return this.$store.state.Information.inputValue = val
        }
      }
    }
  }
</script>

<style scoped>
  .search{
    width: 94%;
    margin: auto;
    height: 60px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  select{
    width: 80px;
    height: 30px;
  }
  .search-box{
    width: 330px;
    height: 30px;
  }
  .search-box div{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: end;
    color: gray;
    float: left;
  }
  .search-box input{
    width: 220px;
    height: 30px;
    float: right;
    border-style: 1px solid gray;
    outline-color: rgb(25, 166, 137);
  }
</style>